<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
   Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />
		<!-- this is for mobile (Android) Chrome -->
		<meta name="viewport" content="initial-scale=1.0, width=device-height">
		<!--  mobile Safari, FireFox, Opera Mobile  -->
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/modernizr.js"></script>
		<!--[if lt IE 9]>
<script type="text/javascript" src="../libs/flashcanvas.js"></script>
<![endif]-->
		<style type="text/css">
			div {
				margin-top: 1em;
				margin-bottom: 1em;
			}
			
			input {
				padding: .5em;
				margin: .5em;
			}
			
			select {
				padding: .5em;
				margin: .5em;
			}
			
			#signatureparent {
				color: darkblue;
				background-color: darkgrey;
				/*max-width:600px;*/
				padding: 20px;
			}
			/*This is the div within which the signature canvas is fitted*/
			
			#signature {
				border: 2px dotted black;
				background-color: lightgrey;
			}
			/* Drawing the 'gripper' for touch-enabled devices */
			
			html.touch #content {
				float: left;
				width: 92%;
			}
			
			html.touch #scrollgrabber {
				float: right;
				width: 4%;
				margin-right: 2%;
				background-image: url()
			}
			
			html.borderradius #scrollgrabber {
				border-radius: 1em;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">签名</h1>
		</header>

		<div id="content" class="mui-content" style="width: 100%;">
			<div id="signatureparent" style="margin: 1px;padding: 1px;">
				<div id="signature"></div>
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" id="confirm">确认</button>&nbsp;&nbsp;
				<button type="button" class="mui-btn mui-btn-danger" id="reset">清除签名</button>
			</div>
			<div>
				<p>Display Area:</p>
				<div id="displayarea"></div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.js"></script>

		<script src="../js/jSignature.js"></script>
		<script src="../js/plugins/jSignature.CompressorBase30.js"></script>
		<script src="../js/plugins/jSignature.CompressorSVG.js"></script>
		<script src="../js/plugins/jSignature.UndoButton.js"></script>
		<script src="../js/plugins/signhere/jSignature.SignHere.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false //启用右滑关闭功能
			});
			$(document).ready(function() {

				var point_x = localStorage.getItem('point_x'); //点击时间发生时的坐标
				var point_y = localStorage.getItem('point_y');
				var x = localStorage.getItem('x', x); //图片的左上角坐标
				var y = localStorage.getItem('y', y);
				var width = localStorage.getItem('width', width); //图片的宽和高
				var height = localStorage.getItem('height', height);
				var src = localStorage.getItem('src');
				console.log("point_x:" + point_x + " " + "point_y:" + point_y + "\n");
				console.log("x:" + x + " " + "y:" + y + "\n");
				console.log("width:" + width + " " + "height:" + height + "\n");
				console.log("src:" + src + "\n");

				// This is the part where jSignature is initialized.
				var $sigdiv = $("#signature").jSignature({ 'UndoButton': false, width: "100%", height: "400px" })

					// All the code below is just code driving the demo. 
					,
					$extraarea = $('#displayarea')
				//var i = new Image()
				//	i.src = 'data:' + data[0] + ',' + data[1]
				//	$(i).appendTo($extraarea)
				$('#confirm').bind('click', function() {
					console.log("hello world");
					$extraarea.html('');
					var data = $sigdiv.jSignature('getData', 'svg')

					var i = new Image()
					i.src = 'data:' + data[0] + ',' + data[1]
					$(i).appendTo($extraarea)
					console.log(data[1]);

					var value = { id: "1", name: "name1", data0: data[0], data1: data[1] };
					$.post("http://192.168.1.127:8080/hello", value, function(resp) {
						console.log(resp); // server response
					}, "json");
					//$.post("test.php", data );//data[0]---image/svg+xml,data[1]-----<?xml version="1.0" encoding="UTF-8"><svg> ......</svg> 
				});
				$('#reset').bind('click', function() {
					var data = $sigdiv.jSignature('reset')
				});

			})
		</script>
	</body>

</html>